<template>
  <div class="goods-box">
    <ul class="goods-list">
      <!--在网页中有两种跳转方式-->
      <!--方式1 使用 a 标签 的形式 叫做 标签跳转-->
      <!--方式2 使用 window.location.href 的形式，叫做 编程式导航-->
      <!-- <router-link :to="'/home/goodsInfo/'+item.id" class="goods-item" v-for="item in goodsList" :key="item.id" tag="li">
        <div class="goods">
          <img :src="item.url">
          <div class="goods-title">{{item.name}}</div>
          <div class="goods-info">
            <p class="goods-price">
              <span class="now">￥{{item.price}}</span>
              <span class="old">￥{{item.oldprice}}</span>
            </p>
            <p class="sell">
              <span>{{item.hot==0?'':'热卖中'}}</span>
              <span>剩{{item.stock}}件</span>
            </p>
          </div>
        </div>
      </router-link>-->
      <li class="goods-item" v-for="item in goodsList" :key="item.id" @click="getInfo(item.id)">
        <div class="goods">
          <img :src="item.url">
          <div class="goods-title">{{item.name}}</div>
          <div class="goods-info">
            <p class="goods-price">
              <span class="now">￥{{item.price}}</span>
              <span class="old">￥{{item.oldprice}}</span>
            </p>
            <p class="sell">
              <span>{{item.hot==0?'':'热卖中'}}</span>
              <span>剩{{item.stock}}件</span>
            </p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      goodsList: []
    };
  },
  created() {
    this.getGoodsList();
  },
  methods: {
    getGoodsList() {
      this.$http.get("goodslist#!method=get").then(result => {
        if (result.status === 200) {
          this.goodsList = result.body.goodslist;
        } else {
          Toast("商品获取失败！");
        }
      });
    },
    getInfo(id) {
      //注意：一定要区分 this.$route 和 this.$router 这两个对象
      //其中：this.$route 是路由【参数对象】，所有路由中的参数，params,query都属于它
      //其中：this.$router 是一个路由【导航对象】，用它可以方法的使用 JS 代码，实现路由的前进后退，跳转到新的 URL 地址
      //1.最简单的
      //this.$router.push("/home/goodsInfo/" + id);
      //2.传递对象
      //this.$router.push({path:"/home/goodsInfo/" + id})
      //3.传递命名的路由 在router.js 中{ path: '/home/goodsInfo/:id', component:GoodsInfo, name:'goodsInfo'}  加个name 属性
      this.$router.push({name:'goodsInfo', params:{ id } })

      // path 不能与 params 一起用
    }
  }
};
</script>

<style lang="scss" scoped>
.goods-box {
  padding: 5px;
  .goods-list {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .goods-item {
      width: 50%;
      padding: 5px;
      background: #fff;
      overflow: hidden;
      .goods {
        border: 1px solid #ddd;
        border-radius: 3px;
        overflow: hidden;
        img {
          width: 100%;
        }
        .goods-title {
          font-size: 14px;
          color: #000;
          line-height: 30px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          padding-left: 5px;
        }
        .goods-info {
          background: #ddd;
          padding: 5px;
          .goods-price {
            line-height: 24px;
            .now {
              font-size: 14px;
              color: #ff0b04;
            }
            .old {
              font-size: 12px;
              color: #999;
              text-decoration: line-through;
            }
          }
          .sell {
            display: flex;
            justify-content: space-between;
          }
        }
      }
    }
  }
}
</style>
